

<template>
  <div class="app">
    <h2>customRef</h2>
    <h4>{{ msg }}</h4>
    <input type="text" v-model="msg">
  </div>

</template>

<script setup lang="ts" name="App">
  import { ref, customRef } from 'vue';
  import useMsgRef from '@/useMsgRef'

  let { msg } = useMsgRef('尚硅谷', 2000)


  // 使用Vue提供的默认ref定义响应式数据, 数据一变, 页面就更新
  // 没法数据一变 等一秒更新/弹出选项框
  // let msg = ref('hello')

// 使用Vue提供的默认ref定义响应式数据,
// let initVal = '你好'
// let timer:number // 定时器返回的是一个数字编号
// // track 跟踪 ,trigger 触发
// let msg = customRef((track, trigger)=>{
//   return {
//     // msg被读取的时候调用
//     get () {
//       // return 'hello'
//       track() // 告诉Vue数据msg很重要,要对msg进行持续关注,一旦msg变化就去更新
//       return initVal
//       // console.log('get')
//     },
//     // msg被修改时调用
//     set (val) {
//       clearTimeout(timer)
//       timer = setTimeout(() => {
//         initVal = val
//         trigger() // 通知Vue, 数据msg变化了
//       }, 1000);

//       // console.log('set', val)
      
//     }
//   }
// })



</script>

<style scoped>
.app {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  padding: 20px;
}


</style>
